<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单组合</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/static/ui/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/ui/style/admin.css" media="all">

</head>
<body>
<style>
    .myimg {
        width: 100px;
        height: 120px;
        display: flex;
        flex-direction: column;
        float: left;
        margin-left: 5px;
    }
    .imgcon {
        width: 100px;
        height: 100px;
    }
    .qr{
        position: absolute;
        left: 15%;
        top: 44%;
    }
</style>

  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body" style="padding: 15px;">
            <form class="layui-form" action="#" method="post" lay-filter="component-form-group">

            {block name="content"}{/block}

            <div class="layui-form-item layui-layout-admin">
                <div class="layui-input-block">
                    <div class="layui-footer" style="left: 0;">
                        <input type="hidden" name="id" value="{:isset($_GET['id']) ? $_GET['id'] : 0}">
                        <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                        <!-- <button type="buttom" id="guanbi" class="layui-btn layui-btn-primary">关闭</button> -->
                    </div>
                </div>
            </div>

        </form>
      </div>
    </div>
  </div>

    
    <script src="/static/ui/layui/layui.js"></script> 
    {include file="public/ajax" /}
    <script>

        var views = {
        _url:false // 数据地址
        ,_func:false // 统一事件处理
        ,_form:false // 表单搜索
        ,_verify:false // 验证
        ,_index:false
        ,url:function(data){
            this._url = data
            return this
        }
        ,get:function(){
            var that = this

            layui.config({
                base: '/static/ui/' //静态资源所在路径
            }).extend({
                index: '/lib/index' //主入口模块
            }).use(['index', 'form', 'laydate','upload'], function(){
                var $ = layui.$
                ,admin = layui.admin
                ,upload = layui.upload
                ,element = layui.element
                ,layer = layui.layer
                ,laydate = layui.laydate
                ,form = layui.form;

                that._index = parent.layer.getFrameIndex(window.name) //获取窗口索引
                layui.$('#guanbi').click(function(){
                    parent.layer.close(that._index);
                })
                // parent.layer.iframeAuto(that._index);
                // 事件监听
                if(that._func){
                    that._func(form,admin,upload,laydate)
                }

                //日期时间选择器
                laydate.render({
                    elem: '#test-laydate-range-datetime'
                    ,type: 'datetime'
                });
                
                /* 自定义验证规则 */
                if(that._verify){
                    form.verify(that._verify);
                }

                // 表单搜索
                that.getForm(form)

                $('.form-file-pic').click(function(){
                    var key = $('.form-file-pic').index(this)
                    var name = $(this).attr('name');
                    var number = $(this).attr('number');
                    layer.open({
                        type: 2,
                        area: ['700px', '450px'],
                        fixed: false,
                        maxmin: true,
                        content: '/admin.php/file/filelist?key='+key+'&name='+name+'&number='+number
                    });
                })

                $('.form-file-pic').next().on('click','.form-file-del',function(){
                    $(this).parent().remove();
                })
                
          });
        }
        // 表单搜索
        ,form:function(viewObj){
          this._form = viewObj
          return this
        }
        ,getForm:function(viewObj){
          var that = this

          if(that._form){
            that._form(viewObj)
          }else{
            //监听提交
            viewObj.on('submit(component-form-demo1)', function(data){
                //执行重载
                that._url = that._url || window.location.pathname
                ajax({
                    url : that._url, 
                    type : 'post', 
                    data : data.field, 
                    cache : false, 
                    dataType : "json", 
                    success : function(res) {
                        if(!res.code){
                            parent.layui.table.reload('test-table-toolbar', {
                            });
                            parent.layer.close(that._index);
                        }
                    }
                },layui.$);
                return false;
            });

          }
        }
        ,func:function(viewObj){
          this._func = viewObj
          return this
        }

        ,verify:function(viewObj){

            this._verify = viewObj

            return this
        }

      };

    </script>
    {block name="script"}{/block}

</body>
</html>
